hast-to-hyperscript

What is hast-to-hyperscript?

The hast-to-hyperscript npm package is a utility that allows you to transform HAST (Hypertext Abstract Syntax Tree) nodes into virtual DOM trees using a hyperscript-style function. This is particularly useful for integrating with virtual DOM libraries like React, Vue, or Hyperscript, enabling the rendering of HTML or markdown content as virtual DOM nodes.

What are hast-to-hyperscript's main functionalities?

Transform HAST to React elements

Converts a HAST node into a React element using React's createElement function. Useful for rendering markdown or HTML content within React applications.

const h = require('react').createElement;
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, world!'}]};
const element = toH(h, hast);
console.log(element);

Transform HAST to Vue elements

Enables the conversion of HAST nodes into Vue virtual nodes using Vue's h function, facilitating the integration of HTML or markdown into Vue components.

const h = require('vue').h;
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, Vue!'}]};
const element = toH(h, hast);
console.log(element);

Transform HAST to Hyperscript elements

Converts HAST nodes into Hyperscript virtual nodes, which can be used with any library that supports the Hyperscript syntax, such as Mithril or Cycle.js.

const h = require('hyperscript');
const toH = require('hast-to-hyperscript');
const hast = {type: 'element', tagName: 'div', properties: {}, children: [{type: 'text', value: 'Hello, Hyperscript!'}]};
const element = toH(h, hast);
console.log(element);

Other packages similar to hast-to-hyperscript

rehype-react

Similar to hast-to-hyperscript, rehype-react is designed to transform HAST into React components. However, it is specifically tailored for React and includes additional features for handling React-specific scenarios, making it more specialized compared to the more general-purpose hast-to-hyperscript.

rehype-vue

Rehype-vue is analogous to rehype-react but for Vue.js. It converts HAST directly into Vue components. Like rehype-react, it is more specialized for Vue compared to hast-to-hyperscript, which is more flexible and can work with various hyperscript implementations.

README

hast-to-hyperscript

Transform HAST to something else through a hyperscript DSL.

Installation

npm:

npm install hast-to-hyperscript

Usage

var toH = require('hast-to-hyperscript');
var h = require('hyperscript');

var tree = { type: 'element',
   tagName: 'p',
   properties: { id: 'alpha', className: [ 'bravo' ] },
   children:
    [ { type: 'text',
        value: 'charlie ' },
      { type: 'element',
        tagName: 'strong',
        properties: { style: 'color: red;' },
        children:
         [ { type: 'text',
             value: 'delta' } ] },
      { type: 'text',
        value: ' echo.' } ] }

// Transform (`hyperscript` needs `outerHTML` to stringify):
var doc = toH(h, tree).outerHTML;

Yields:

<p class="bravo" id="alpha">charlie <strong>delta</strong> echo.</p>

API

toH(h, node[, prefix])

Transform HAST to something else through a hyperscript DSL.

Parameters

• h (Function)
• node (Element)
• prefix (string or boolean, optional) — Prefix to use as a prefix for keys passed in attrs to h(), this behaviour is turned off by passing false, turned on by passing a string. By default, h- is used as a prefix if the given h is detected as being virtual-dom/h or React.createElement

Returns

* — Anything returned by invoking h().

function h(name, attrs, children)

Transform HAST to something else through a hyperscript DSL.

Parameters

• name (string) — Tag-name of element to create
• attrs (Object.<string>) — Attributes to set
• children (Array.<* | string>) — List of children and text, where children are the result of invoking h() previously

Returns

* — Anything.

Caveats

Nodes: Most hyperscript implementations only support elements and text (as leave nodes). HAST supports doctype, comment, and root as well.

• If anything other than an element or root node is given, hast-to-hyperscript throws
• If a root is given with one element child, that element is transformed
• If a root with no children, a non-element only child, or more than one children, the children are wrapped in a div element

If unknown nodes are found deeper in the tree, they are ignored: only text and element nodes are transformed.

Support: Although there are lots of libs mentioning support for this interface, there are significant differences between them. For example, hyperscript doesn’t support classes in attrs, virtual-dom/h needs an attributes object inside attrs most of the time. hast-to-hyperscript works around these differences for:

• React.createElement
• virtual-dom/h
• hyperscript

Related

• hastscript

Contribute

See contribute.md in syntax-tree/hast for ways to get started.

This organisation has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Titus Wormer